<template>
  <div>
    <div id="container" style="width: 100%; height: calc(100vh - 100px)"></div>

    <div id="info"></div>
  </div>
</template>

<script>
import { pageArea } from "@/api/area";
var content = [
  "<div style='font-size: 14px; color: red; width: 200px; height: 50px'>这是信息窗口</div>",
];

export default {
  name: "Map",
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 100,
      },
      areaList: [],
      message:''
    };
  },
  created() {
    // this.getList();
  },
  mounted() {
    // 创建地图实例
    var map = new AMap.Map("container", {
      zoom: 19,
      center: [117.205571,39.133815],
      resizeEnable: true,
    });

    var infoWindow = new AMap.InfoWindow({
      anchor: "top-right",
      content: content.join("<br>"), //传入 dom 对象，或者 html 字符串
    });

    var clickHandler = function (e) {
      
      this.message = "您在[ " + e.lnglat.getLng() + "," + e.lnglat.getLat() + " ]的位置点击了地图！";
      console.log("llll",this.message);
      alert(this.message)
      console.log(
        "您在[ " + e.lnglat.getLng() + "," + e.lnglat.getLat() + " ]的位置点击了地图！"
      );

      // infoWindow.open(map, [116.396901, 39.919544]);
    };

    // 绑定事件
    map.on("click", clickHandler);

    pageArea(this.queryParams).then((response) => {
      this.areaList = response.data.records;
      console.log("pageAreathis.areaList", this.areaList);
      this.areaList.forEach((area) => {
        if (area.remark) {
          let arr = area.remark.split(",");
          let x = Number(arr[0]);
          let y = Number(arr[1]);
          console.log("remark", x, y);
          var marker = new AMap.Marker({
            position: new AMap.LngLat(x, y), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: area.areaName,
            snippet:  area.areaName,
            content:area.areaName,
          });
          var marker2 = new AMap.Marker({
            position: new AMap.LngLat(x, y), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: area.areaName,
          });
          map.add(marker);
          map.add(marker2);
        }
      });
    });



    //实例化城市查询类
    map.plugin("AMap.Geolocation", function () {
      var geolocation = new AMap.Geolocation({
        // 是否使用高精度定位，默认：true
        enableHighAccuracy: true,
        // 设置定位超时时间，默认：无穷大
        timeout: 10000,
        // 定位按钮的停靠位置的偏移量
        offset: [10, 20],
        //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        zoomToAccuracy: true,
        //  定位按钮的排放位置,  RB表示右下
        position: "RB",
      });

      geolocation.getCurrentPosition(function (status, result) {
        if (status == "complete") {
          onComplete(result);
        } else {
          onError(result);
        }
      });

      function onComplete(data) {
        // data是具体的定位信息
        console.log(data);
      }

      function onError(data) {
        // 定位出错
        console.error(data);
      }
    });
  },
  methods: {
    notifyFun(message){
      this.$notify({
          title: '标题名称',
          message:message
        });
    }
  },
  watch:{
    message:function(newVal,oldVal){
      console.log("发啊啊");
      this.$message.success(newVal)
    },
    immediate:true
  }
};
</script>

<style></style>
